Jump to content
  • 0

в ie7 футер нормальный, в w3c-браузерах последний див в футере уезжает вниз

clavin

Asked by clavin,

 Share

Question

clavin Explorer

clavin

Posted
Posted

Помогите, пожалуйста. Верстаю страницу. В футере есть две строчки, одна над другой. Я их сделал дивами определённой высоты (их общая ширина такая, что не превышает высоту футера). Во всех браузерах что-то не так. Только в ie7 строчки не уезжают за границы футера. В остальных есть смещение вниз дива #copyright. Если ставлю line-height:0, то во всех браузерах исправляется, а в ie7 текст пропадает. Что здесь не так?

С помощью Firebug-а в fitefox попробовал поотключать свойства у дива #copyright, так если у него убрать ширину, то всё исправляется

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head> 
   <title>В футере последний див в IE7 отображается не так</title> 

	  <style type="text/css" media="all">

* {
	margin: 0;
	padding: 0;
	border: 0;
}

body {
   padding: 0;
   color: #000;
   width:100%;
}

#footer {
   height:69px;
   width:1000px;
}

#footer ul {
   height:50px;
   list-style:none;
   width:380px;
   margin:0 auto;
}

#footer li {
   float:left;
   color:#cc99cc;
   margin:20px 3px;
   display:block;
   float:left;
   font:100%/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
   font-size: 10px !important;
}

#footer li.cutter {
   font-size:10px;
}

#footer li a{
   color:#cc99cc;
   text-decoration:none;
   text-align:center;
}

#copyright {
   clear: both;
   float:none;
   height:18px;
   font-size: 12px !important;
   color:#cc99cc;
   width:350px;
   margin:0 auto;
}
	  </style>
</head> 

<body> 

	  <div id="footer">
		 <ul>
			<li><a href="index.html">ITEM 1</a></li> 
			<li class="cutter">|</li> 
			<li><a href="index.html">ITEM 2</a></li>
			<li class="cutter">|</li> 
			<li><a href="index.html">ITEM 1</a></li> 
			<li class="cutter">|</li> 
			<li><a href="index.html">ITEM 1</a></li> 
			<li class="cutter">|</li> 
			<li><a href="index.html">ITEM 1</a></li> 
		 </ul>
		 <div id="copyright">Копирайт здесь!</div>
	  </div>

</body> 
</html>

Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0
clavin Explorer

clavin

Posted
  • Author
Posted

Куда мои близорукие глаза смотрели?

Уже поправил. Там в #footer li стоял нижний margin в 20px. Замечено мною, что IE глючно работает с нижними полями. Исправил задав #footer li {margin:20px 3px 0 3px;}

#footer li {

float:left;

color:#cc99cc;

margin:20px 3px 0 3px;

display:inline;

float:left;

font:100%/20px "Trebuchet MS", Arial, Helvetica, sans-serif;

font-size: 10px !important;

}

Link to comment
Share on other sites
  • 0
clavin Explorer

clavin

Posted
  • Author
Posted

Вывод: для ie нижние margin надо ставить в ноль :ph34r:

Да у тебя код вообще ужас. Видно опыта нет совсем, советую вот сюда внимание обратить http://stepbystep.htmlbook.ru/

Извините, что не в тему... но где конкретно в коде вы видите признак непрофессионализма? :)

Link to comment
Share on other sites
  • 0
clavin Explorer

clavin

Posted
  • Author
Posted
Везде, можешь дать мне любой твой отрезок на выбор.

Но вот в коде выше укажите, пожалуйста. Я потом и кровью все статьи на этом сайте перечитал и тут выясняется, что неправильно читал что ли?

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
Но вот в коде выше укажите, пожалуйста. Я потом и кровью все статьи на этом сайте перечитал и тут выясняется, что неправильно читал что ли?

Да вот хоть вот этот взять

#footer li {
   float:left;
   color:#cc99cc;
   margin:20px 3px;
   display:block;
   float:left;
   font:100%/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
   font-size: 10px !important;
}

1) Стоит два раза float:left;

2) При этом стоит display:block;

3) Сначала пишется общее правило font:100%/20px "Trebuchet MS", Arial, Helvetica, sans-serif;

4) Потом переопределяется тут-же font-size: 10px !important;

Дальше показывать?

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
Да, действительно не очень аккуратно написал. Исправлюсь.

А ведь иногда делают свойство display: inline; для элементов, которые имеют свойство float:left;

Значит не всё так просто :ph34r:

Отлично, значит я не прав. Дальше разговаривать смысла не вижу.

Link to comment
Share on other sites
  • 0
DjTarik Explorer

DjTarik

Posted
Posted
А ведь иногда делают свойство display: inline; для элементов, которые имеют свойство float:left;

Значит не всё так просто :ph34r:

Это делаю в одном единственном случае... Сомневаюсь, что тут ваш случай)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept